// 第一轮
// setTimeout(() => {
//     $('.monitor-wrapper .list .item').css({ transform: 'translateY(-100%)' });
//     setTimeout(() => {
//         // 移动第一个到最底下
//         $('.monitor-wrapper .list .item').eq(0).css({ transform: 'translateY(1000%)' });
//     }, 1000);
// }, 2000);

// // 第二轮
// setTimeout(() => {
//     // 所有人在原本基础上上移100%
//     // 处理字符串
//     $('.monitor-wrapper .list .item').each(function () {
//         const style = $(this).attr('style');
//         const num = parseInt(style.split('(')[1]);
//         $(this).css({ transform: `translateY(${num - 100}%)` });
//     });
//     setTimeout(() => {
//         // 移动第二个到最底下
//         $('.monitor-wrapper .list .item').eq(1).css({ transform: 'translateY(900%)' });
//     }, 1000);
// }, 4000);

;(function () {

    // 故障/异常切换
    $('.monitor-wrapper .tab-btn').on('click', function () {
        const id = $(this).attr('id');
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        // 每次切换重新渲染
        render(id);
    });

    // 间隔定时器
    let timer;
    // 延时定时器
    let timeoutTimer;
    let counter = 0;
    let currentId = 'breakdown';
    function render (id) { // id: 'breakdown' || 'error'
        currentId = id;
        // 初始化定时器
        clearInterval(timer);
        clearTimeout(timeoutTimer);
        // 初始化计数器
        counter = 0;

        // 初始化数据
        $('.monitor-wrapper .list').html(''); // 回到石器时代 因为动画有问题
        for (let i = 0; i < 11; i++) {
            const itemEl = $(`
                <div class="item" style="transform: translateY(0);">
                    ${moment(monitor[id][i].timestamp).format('YYYY-MM-DD')}
                    ${monitor[id][i].address}
                    ${monitor[id][i].code}
                    ${monitor[id][i].id}
                </div>
            `);
            itemEl.appendTo($('.monitor-wrapper .list'));
        }
        // 初始化启动
        start(id);

        // 切屏离开时暂停 回来继续播放
        $(window).off('visibilitychange', onVisibilityChange);
        $(window).on('visibilitychange', onVisibilityChange);
    }

    // 切屏时关闭定时器
    function onVisibilityChange () {
        if (document.visibilityState === 'hidden') {
            clearInterval(timer);
        } else {
            start(currentId);
        }
    }

    // 跑动画
    function start (id) {
        timer = setInterval(() => {
            // 所有人在原本基础上上移100%
            // 处理字符串
            $('.monitor-wrapper .list .item').each(function () {
                const style = $(this).attr('style'); // 第一个难点 把'transform: translateY(-100%); visibility: visible;'中的-100拿出来
                const num = parseInt(style.split('(')[1]);
                $(this).css({
                    transform: `translateY(${num - 100}%)`,
                    visibility: 'visible',
                });
            });
            const t = Date.now();
            // 大家一起跑完向上的动画
            timeoutTimer = setTimeout(() => {
                // 第二难点 找到第一个人 扔到最底下
                const topEl = $('.monitor-wrapper .list .item').eq(counter % 11);
                const style = topEl.attr('style');
                const num = parseInt(style.split('(')[1]);
                // 最上面的移动到最底下
                topEl.css({
                    transform: `translateY(${num + 1100}%)`,
                    visibility: 'hidden',
                });
                // 1: 11
                // 2: 12
                // 偷摸把数据换了
                const idx = 11 + counter;
                topEl.html(`
                    ${moment(monitor[id][idx].timestamp).format('YYYY-MM-DD')}
                    ${monitor[id][idx].address}
                    ${monitor[id][idx].code}
                    ${monitor[id][idx].id}
                `);
                counter++;
                console.log(Date.now() - t);
            }, 1000);
        }, 2000);
    }

    render('breakdown');

})();
